<template>
	<view><view @click="backVoid($event)" class="" id="chinaMap" style="width: 100%;height: 800px;"></view></view>
</template>

<script>
import superMapTool from './superMapTool.js';
export default {
	data() {
		return {
			mapCharts: '',
			clickStop: false
		};
	},
	mounted() {
		this.drawMap();
	},
	methods: {
		backVoid: function(e) {
			// 点击地图外界面 且是省地图的话 会返回到中国地图
			if (!this.clickStop) {
				this.mapCharts.setOption(superMapTool.chartsOption(), true);
			}
		},
		drawMap: function() {
			this.echarts.registerMap('china', { geoJSON: superMapTool.chinaGeo });
			// this.echarts.registerMap('province',{geoJSON: superMapTool.provinceGeo})

			this.mapCharts = this.echarts.init(document.getElementById('chinaMap', 'dark'));
			this.mapCharts.setOption(superMapTool.chartsOption());

			let self = this;
			this.mapCharts.on('click', function(params) {
				console.log(params);
				self.clickStop = true;
				if (params.name == '河南省') {
					let newOption = superMapTool.getProvinceGeoFromId(params.name);
					self.echarts.registerMap('410000', { geoJSON: newOption.dataV });

					self.mapCharts.setOption(newOption.option, true);
				}
				setTimeout(function() {
					self.clickStop = false;
				}, 100);
			});
		}
	}
};
</script>

<style lang="less"></style>
